import React, {
    PureComponent
} from 'react';

import {
    View,
    Image,
    StyleSheet
} from 'react-native';



import {
    Press
} from './../../../components';

import * as CONST from './../../../const';
import SafeAreaView from 'react-native-safe-area-view';

import discover_icon from './../../../images/tabs/explore_normal.png';
import discover_icon_selected from './../../../images/tabs/explore_selected.png';

import connection_icon from './../../../images/tabs/connctions_normal.png';
import connection_icon_selected from './../../../images/tabs/connctions_selected.png';

import chat_icon from './../../../images/tabs/chat_normal.png';
import chat_icon_selected from './../../../images/tabs/chat_selected.png';

import me_icon from './../../../images/tabs/me_normal.png';
import me_icon_selected from './../../../images/tabs/me_selected.png';


import connect from './../../../utils/connect';

const tabs = [
    {name: `Discover`, icon: discover_icon, selected: discover_icon_selected},
    {name: `connection`, icon: connection_icon, selected: connection_icon_selected},
    {name: `Chat`, icon: chat_icon, selected: chat_icon_selected},
    {name: `Me`, icon: me_icon, selected: me_icon_selected},
]

interface Props {
    chat?:any,
    page?: number,
    onChange?: Function
}


@connect([`chat`])
class TabBar extends PureComponent<Props> {

    static defaultProps = {
        page: 0,
        onChange: () => null
    }

    get unRead() {
        const {
            chat
        } = this.props;
        const {
            unRead
        } = chat;
        return unRead || {};
    }

    get dotTotal() {
        return [0].concat(
            Object.values(this.unRead)
        ).reduce((a,b) => a+b)
    }

    render() {
        const {
            page,
            onChange
        } = this.props;
        return (
            <SafeAreaView
                style={styles.container}
                forceInset={{bottom:'always',top:`never`}}
            >
                <View style={styles.content}>
                    {tabs.map((item, i) => {
                        const {
                            icon,
                            selected
                        } = item;

                        const _selected = page === i;
                        const _icon = _selected ? selected : icon;

                        const dotElement = i === 3 ? (
                            this.dotTotal > 0 ? (
                                <View style={styles.dotStyle} />
                            ) : null
                        ) : null;

                        return (
                            <Press
                                key={i}
                                value={i}
                                duration={500}
                                type="rubberBand"
                                onPress={onChange}
                                style={styles.tabItem}
                            >
                                <View style={styles.center}>
                                    <Image source={_icon}/>
                                    {dotElement}
                                </View>
                            </Press>
                        )
                    })}
                </View>
            </SafeAreaView>
        )
    }
}

export default TabBar;

const styles = StyleSheet.create({
    container: {
        backgroundColor: `#fff`
    },
    content:{
        height: 56,
        borderTopWidth:1,
        borderColor:`#eee`,
        overflow: `hidden`,
        flexDirection: `row`
    },
    tabItem: {
        flex: 1,
        alignItems: `center`,
        justifyContent: `center`
    },
    dotStyle:{
        width:6,
        height:6,
        right:0,
        top:0,
        borderRadius:3,
        position:`absolute`,
        backgroundColor:CONST.color
    },
    center:{
        alignItems: `center`,
        justifyContent: `center`
    }
}) as any;